<template>
  <div>
    <div class="Showtwonav-wrap">
      <span
        :class="{ active: num == item.id }"
        v-for="(item, index) in list"
        @click="tabs(item.id, index)"
      >
        {{ item.app }}
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "Showtwonav",
  data() {
    return {
      num: 0,
      list: [
        { app: "全部", id: 0 },
        { app: "演唱会", id: 1 },
        { app: "话剧歌剧", id: 2 },
        { app: "休闲展览", id: 3 },
        { app: "戏曲艺术", id: 4 },
        { app: "音乐节", id: 5 },
        { app: "亲子演出", id: 6 },
        { app: "音乐会", id: 7 },
        { app: "舞蹈芭蕾", id: 8 },
        { app: "体育赛事", id: 9 },
        { app: "其他", id: 10 },
      ],
    };
  },
  created() {
    // this.tabs()
  },
  components: {
  },
  methods: {
    tabs(id, index) {
      // console.log(index);
      // console.log(id);
      this.num = id;
      if (index == 0) {
        this.$router.replace("/show/recom");
      } else if (index !== 0) {
        this.$router.replace("/show/page/"+index);
        this.$store.commit('mids',index)
      }
    },
  },
  watch:{
    index(old,news){
      console.log(old);
      console.log(news);
    }
  },
  mounted() {
    // this.tabs()
  },
};
</script>

<style lang="scss" scoped>
.Showtwonav-wrap {
  box-sizing: border-box;
  padding: 0 130px;
  margin: 60px 0 0 0;
  background: #ffffff;
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  span {
    cursor: pointer;
  }
}
.active {
  padding: 12px 0;
  border-bottom: 5px solid rgb(221, 32, 32);
  color: #ed4036;
}
</style>
